<html>
    <head>
        <include file="Public:head"/>
        <style type="text/css">
            .modal-backdrop{z-index: 0;}
            .table-eidt tr{height:60px;}
            .form-edit .input-group{margin-top:5px;}
            .form-edit .input-group:first-child{margin-top: 0;}
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <form class="form-inline">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">菜单编号</div>
                        <input type="text" class="form-control" id="code" placeholder="菜单编号"/>
                    </div>
                    <div class="input-group">
                        <div class="input-group-addon">菜单名称</div>
                        <input type="text" class="form-control" id="name" placeholder="菜单名称"/>
                    </div>
                </div>
                <button class="btn btn-default"><i class="fa fa-search"></i>&nbsp;搜索</button>
            </form>
        </div>
        <div class="container-fluid">
            <div class="btn-group">
                <button type="button" id="btn-add" class="btn btn-default btn-sm"><i class="fa fa-plus-square-o"></i>&nbsp;新增</button>
                <button type="button" id="btn-edit" class="btn btn-default btn-sm"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</button>
                <button type="button" id="btn-del" class="btn btn-default btn-sm"><i class="fa fa-trash-o"></i>&nbsp;删除</button>
                <button type="button" class="btn btn-default btn-sm"><i class="fa fa-refresh"></i>&nbsp;刷新</button>
                <button type="button" class="btn btn-default btn-sm"><i class="fa fa-upload"></i>&nbsp;导出</button>
                <button type="button" class="btn btn-default btn-sm"><i class="fa fa-download"></i>&nbsp;导入</button>
            </div>
        </div>
        <div class="container-fluid">
            <table class="table">
                <thead>
                    <tr>
                        <th style="width:30px;">#</th>
                        <th style="width:30px;"><input type="checkbox" class="chk-all"/></th>
                        <th>菜单编号</th>
                        <th>菜单名称</th>

                        <th>菜单图标</th>
                        <th>父级菜单</th>
                        <th>更新人</th>
                        <th>更新时间</th>
                    </tr>
                </thead>
                <tbody>
                    <volist name="list" id="vo">
                        <tr>
                            <td>{$K}</td>
                            <td><input type="checkbox" class="chk-item"/></td>
                            <td>{$vo.code}</td>
                            <td>{$vo.name}</td>

                            <td><i class="{$vo.icon}"></i></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </volist>
                </tbody>
            </table>
        </div>
        <div class="container-fluid">
            {$page}
        </div>
        <!--boostrap modal -->
        <div class="modal fade bs-example-modal-sm" tabindex="-1" id="myModal" role="dialog" aria-labelledby="mySmallModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content" style="z-index: 1050">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">菜单管理</h4>
                </div>
                <div class="modal-body">
                    <form class="form-edit">
                        <div class="input-group">
                            <div class="input-group-addon">编号</div>
                            <input type="text" class="form-control" id="modal-code" placeholder="按钮编号"/>
                        </div>
                        <div class="input-group">
                            <div class="input-group-addon">名称</div>
                            <input type="text" class="form-control" id="modal-name" placeholder="菜单名称"/>
                        </div>
                        <div class="input-group">
                            <div class="input-group-addon">排序</div>
                            <input type="number" class="form-control" value="0" id="modal-sort" placeholder="排序顺序"/>
                        </div>
                        <div class="input-group">
                            <div class="input-group-addon">状态</div>
                            &nbsp;
                            <label class="radio-inline">
                                <input type="radio" class="modal-statue" name="modal-statue" id="modal-statue1" value="1" checked="checked" />&nbsp;启用                            
                            </label>
                            <label class="radio-inline">
                                <input type="radio" class="modal-statue" name="modal-statue" id="modal-statue0" value="0"  />&nbsp;停用
                            </label>
                        </div>
                        <input type="hidden" id="modal-id"/>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="btn-save" class="btn btn-primary">保存</button>
                </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </body>
</html>
<script type="text/javascript">
    /*
    *modal 内容清理
    */
    function cleanModal(){
        
    }

    $("#btn-add").click(function(){
        $("#myModal").modal();
    });

    $("#btn-save").click(function(){
        if(!check()){
            return;
        }
        var code = $("#modal-code").val().trim();
        var name = $("#modal-name").val().trim();
        var sort = $("#modal-sort").val().trim();
        var id = $("#modal-id").val().trim();
        var statue = $(".modal-statue").val().trim();
        var data = {"code":code,"name":name,"sort":sort,"id":id,"statue":statue};
        $.ajax({
            url:"/index.php/Home/AuthMenu/save",
            data:data,
            type:"post",
            dataType:"json",
            success:function(data){
                alert(data.msg);                
                if(data.code==1){
                    window.location.reload();
                }
            }
        });
    });

    function check(){
        var code = $("#modal-code").val().trim();
        var name = $("#modal-name").val().trim();
        var sort = $("#modal-sort").val().trim();
        if(code==""){
            alert("请输入编号");
            return false;
        }
        if(name==""){
            alert("请输入编名称");
            return false;
        }
        if(sort==""){
            alert("请输入排序顺序");
            return false;
        }
        if(isNaN(sort)){
            alert("排序顺序必须是数字!");
            return false;
        }
        return true;
    }
</script>